MULTIMEDIJSKI SUSTAVI - Ponavljanje (1)

1. Uvodni pojmovi o multimediji i hipermediji

Slika 1. Multimedija

Multimedija kao pojam nije točno definirana. Dolazi od latinskih riječi multus (mnogi) i medium (medij). Predstavlja kombinaciju teksta, zvuka, grafike, animacije i videa koji se objavljuju putem računala.

Svaki od ovih elemenata ima različite osobine od ostalih te omogućuje da se poruka prenese korisnicima na različite načine.

Multimedijski se elementi prema svojima karakteristikama mogu podijeliti na vremenski orijentirane i statičke. U vremenski orijentirane elemente spadaju zvuk video i animacija dok su tekst i slika statički elementi. Svi ti elementi osim zvuka su vizualni.

HIPERMEDIJA = HIPERTEKST + MULTIMEDIJA

Slika 2. Hipermedija

Hipermedija
naglašava ne tekstualne komponente dodane hipertekstu, primjerice animaciju, snimljeni zvuk i video. Hipermedijski sustav zasniva se na čvor-veza paradigmi. Čvor obično predstavlja jedinstveni koncept ili ideju i može sadržavati tekst, grafiku, animaciju, zvuk ili video. Čvorovi su s drugim čvorovima povezani vezama. Kolekcija primitivnih čvorova s vezama koji predstavljaju odnose među njima naziva se hipermreža.

Osnovni nedostatak čvor-veza modela podataka je u tome što se odvaja strukturu hipermedijske baze podataka od stvarnog sadržaja. Problem koji se radi toga javlja je stvaranje i održavanje strukture hipermreže. Hipermedijski sustavi temelje se na pretpostavci da će korisnikova interpretacija ponuđenog znanja biti smislenija od autorove.
Interaktivnost je vrsta dijaloga korisnika i aplikacije. Hipermedija uključuje interaktivnost te od korisnika traži aktivnost. Interaktivnost korisniku omogućuje biranje, odlučivanje i povratno utjecanje na program u stvarnom vremenu.

Navigacija je najčešći oblik interaktivnosti kod hipermedije. Odnosi se na način kretanja korisnika kroz hipermedijsku aplikaciju.

World Wide Web je mrežni navigacijski servis koji pomaže u pronalaženju informacija na Internetu. Nastao je kao hipertekstualni sustav, a dodavanjem multimedijskih elemenata postaje hipermedijski sustav.

Multimedija se primjenjuje gotovo svugdje: u marketingu, poslovanju, proizvodnji, obrazovanju... Primjenjuje se u svim područjima gdje se koriste informacijski sadržaji.

2. World Wide Web

Slika 3. Tim Bernes Lee i Robert Cailliau

World Wide Web (WWW) je grafički hipertekstualni način upotrebe interneta koji koristi protokol HTTP za podataka preko interneta (sa servera do korisnikova računala). prenošenje stranica weba i drugih.

Projekt kojim je počeo razvoj Weba predložili su 1990. u CERN-u engleski inženjer i znanstvenik Tim Bernes Lee i belgijski znanstvenik Robert Cailliau.

Web stranice pisane su u HTML (Hypertext Markup Language) jeziku.
Za taj način upotrebe interneta posjetitelj mora upotrebljavati preglednik weba, koji omogućuje posjetitelju interneta pregledavanje stranica pisanih u jeziku HTML. Bitne razlike po kojima se web razlikuje od ostalih načina upotrebe interneta je to što omogućava hipertekstualne veze između dokumenata, te što omogućuje kombinirano prikazivanje teksta, slika, zvuka
i videa, dakle omogućuje integraciju informacijskih sadržaja.

Slika 4. Struktura HTML dokumenta

Hipertekst je dokument ili sustav s povezanim tekstualnim jedinicama. To je elektronička slika teksta ugrađenog u računalo i može se jedino unutar računalnog sustava ispunjavati, mijenjati i čitati. Koncepcija hiperteksta temelji se na računalnom sustavu koji korisniku pruža mogućnost prikazivanja kroz mrežu pojedinačnih tekstualnih sadržaja. Pristup tekstovima omogućava prepoznavanje položaja i smjer kretanja kroz mrežu. Osnovni je cilj hiperteksta spremanje sadržaja u računalo na takav način da ga korisnik može pregledavati i pretraživati na bilo koji način koji mu trenutno odgovara.

Preglednici i poslužitelji komuniciraju koristeći HTTP (HyperText Transfer Protocol) protokol koji se sastoji od skupa ASCII zahtjeva, a temelji se na zahtjev/odgovor paradigmi.

Slika 5. HTTP protokol

Još jedan važan element weba je Uniform Resource Locator (URL). To je sustav adresiranja koji se koristi u preglednicima weba. Pomoću URL-a može se pozvati svaki dostupan dokument ne samo na webu već i općenito na internetu. URL adresa se sastoji od imena protokola koji se želi koristiti, imena servera kojem se želi pristupiti te od točnog mjesta (direktorija) na serveru na kojem se nalazi dokument kojem želite pristupiti.

Primjer URL-a:
http://www.nazivstranice.hr/neki_direktorij/dokument.html

3. Grafika

Računalna grafika, skraćeno RG, je polje vizualnog računarstva koje rabi računala za stvaranje slika i/ili uklapanje i mijenjanje slikovnih i prostornih podataka koji su uzeti iz stvarnosti. Sam naziv 'računalna grafika' prvi je u upotrebu uveo William Fetter, Boeing (1960).

Bitmape i vektorska grafika

Kada pričamo o slikama razlikujemo dva različita pristupa generiranja slike na računalu, to su bitmape(paint ili rasterska grafika) i

vektorska grafika (drawn grafika). Kod vektorske grafike crtanje i prikaz se svodi na više jednostavnih matematičkih formula, računalo zabilježi najviše 4 podatka (duljina, smjer, boja ruba, boja ispune), te traži manje memorijskog prostora od bitmape.

Prednost vektorske grafike je što čuva objekte u slučaju da se crtaju jedni preko drugih, dok kod bitmapa se dijelovi slike ne mogu pomaknuti tako dase sčuvaju objekti koji su nacrtani ispod .

Slika 6. kod bitmapa se pomicanjem objekata ne čuva podloga

Boja je psihofizički fenomen induciran svjetlom ili osjećaj koji u mozgu izaziva svjetlost emitirana od nekog izvora ili reflektirana s površine nekog tijela.

Slika 7. Klasični spektar vidljivog svjetla

Svjetlost postoji u 2 oblika: kao direktno svjetlo i reflektiranosvjetlo.
Vidljiva svjetlost predstavlja dio elektromagnetskog spektra koji ljudsko oko može percipirati (380-720 nanometara).

Postoje 2 osnovne skupine boja: kromatske i akromatske.

Harrisov i Munsellov model boja

Iz kruga boja se miješanjem osnovnih boja (RGB- crvena zelena plava) nastaju izvedene, sekundarne boje (CMY - plavozelena, ružičasta, žuta), te njihovim daljnjim miješanjem dobijemo varijacije.

Slika 8. Harrisov model boja

Munsell je dodao krugu boje treću dimenziju, pa je tako opisao boju modelom kugle, u kojoj je bilo moguće prikazati ovisnost svih triju parametra koji čine obojenost.
Munsel razlikuje tri dimenzije boja te ih klasificira prema njihovom:

tonu (hue)
zasićenosti (saturation)
svjetlini (brightness)

RGB
model nastao je na osnovu prirodne percepcije oka da registrira RGB boje, koristi aditivno miješanje boja Red-Green-Blue. Primjenjuje se kod monitora, televizora, projektora.

CMYK
model boja koristi suptraktivno miješanje boja (oduzima boju bijelom svjetlu), puna mješavina svih komponenti (Cyan, Magenta, Yellow, Key) proizvodi crnu boju. Koristi se za pigmentaciju kod ispisnih uređaja. Ostali modeli boja: HSB sustav,CIE Lab sustav.
.

Broj piksela koji monitor ili neki drugi uređaj može prikazati po jedinici duljine naziva se REZOLUCIJA.
RENDERIRANJE je proces geNeriranja uzorka piksela prema modelu.
Slika ispod prikazuje primjer crtanja jednog od vektorskih objekta u SVG-u.

Slika 9. elipsa

Transformacije

Kod vektorske grafike zanimljive su transformacije koje čuvaju objekte.Transformacije koje čuvaju ravne linije i čuvaju paralelnost linija zovu se AFINE TRANSFORMACIJE. Najvažnije su: translacija, skaliranje,roacija, zrcaljenje,smicanje. Distorzije ili iskrivljenja su sve ostale nepravilne transformacije objekata (nisu alfine).

Bitmapa je najstariji i još uvijek najpopularniji način prikaza slika. Opis slike vrši se pomoću niza pojedinačnih točkica (piksela) na rasteru, odnosno mapi bitova. Postoje dva elementa koji definiraju bitmapu: rezolucija (razlučivost) i dubina slike.
Rezolucija slike je veličina koja označava broj piksela koji tvore bitmapu. Stvarna veličina slike se može odrediti i formulom:

Slika 10. bitmapa.jpg

veličina = rezolucija / gustoća piksela.

Dubina slike je broj bitova koji se koriste za opis piksela, te je standardizirana na nekoliko inačica:
Monokromatska ili crno-bijela slika
Grayscale – slika u sivim tonovima
True color ili slika u punoj boji
Full color – slika u boji namjenjena za tisak u CMYK sustavu

KOMPRESIJA (SAŽIMANJE) digitalnih podataka predstavlja proces kodiranja koji će reducirati broj bitova potreban za prikaz podataka.
Sažimanje vrši koder a vraćanje u nesažeti oblik dekoder.
2 grupe algoritma za sažimanje:

sažimanje bez gubitka informacija - dekodirani sigal identičan je ulaznom
sažimanje s gubitkom informacija - dekodirani signal se razlikuje od ulaznog

omjer kompresije = B0/B1 B0- broj bitova prije sažimanja; B1- broj bitova da se podaci prikažu nakon sažimanja.

Usporedba gif i jpeg formata

FORMAT	BROJ BOJA	KOMPRIMIRANJE	KADA SE KORISTI
GIF	do 256	ne gube se detalji	slike sa malo boja; potrebnije je sačuvati detalje nego smanjiti veličinu datotke
JPEG	16.7 milijuna	kod spremanja se gube detalji	za fotografiranje;nisu potrebni detalji nego da datotek bude mala za prenošenje

4. Tekst

'Primarni medijski element'

Tekst možemo nazvati primarnim medijskim elementom u multimedijskom okruženju na računalu jer se digitalizirani tekst koristi od samih početaka korištenja računala.Riječi, odnosno tekst, predstavljaju najuobičajeniji i najrašireniji sustav komuniciranja. Riječima se svaka stvar ili pojava može precizno i točno opisati te zato predstavljaju ključne elemente ne samo sadržaja multimedijskih prezentacija nego i naslova ostalih elemenata navigacijskog sustava.

Ugradnja teksta u računalo

Ugradnja tekstualnih sadržaja u računalo može biti ručna upisivanjem teksta ili strojna pomoću skenera i tehnologije optičkog prepoznavanja znakova (OCR - Optical Character Recognition).
Ručno upisivanje teksta pomoću tipkovnice vrši se pomoću određenog programskog alata za upis teksta čiji odabir ovisi prvenstveno o vrsti tekstualnog zapisa koji se želi pohraniti na računalo te o računalnoj platformi.
Za unos i obradu opširnijeg teksta kao najzastupljeniji alat za obradu teksta ili tekst procesor unutar Windows platforme koristi se Microsoft Word.
Zbog sporosti ručnog upisivanja teksta kao zamjena za ručni unos koristi se strojna ugradnja pomoću tehnologije optičkog prepoznavanja teksta.
Pri tome se koriste skeneri koji omogućuju brzo preslikavanje slika i teksta u digitalni oblik.

Kodiranje znakova

Tekstualni sadržaji upisani su u računalo korištenjem određenog koda kojim se pisani znakovi prevode u stroju razumljive oznake. Kod je po definiciji temeljno pravilo kojim se informacija predstavlja određenim binarnim vrijednostima pri čemu svaki znak (slovo, brojka, posebni ili grafički znak) dobiva točno određenu binarnu kombinaciju. Kodiranje predstavlja postupak pretvorbe znakova po pravilima primijenjenog koda.

ASCII kod

ASCII kod je jedan od najstarijih i najrasprostranjenijih kodnih sustava za komunikaciju sa računalom.Osnovni ASCII kod je 7-bitni sustav za kodiranje znakova koji omogućuje prikaz 128 znakova

ISO 8859 standardi

Ovi standardi sadrže znakove potrebne za različite jezike i kulture, npr. jezike zapadne Europe (ISO 8859-1), središnje/istočne Europe (ISO 8859-2), arapske znakove (ISO 8859-6), turski jezik (ISO 8859-9) itd.

Slika 11. ISO 8859-1

Unicode

Kod svih prethodno spomenutih kodnih sustava kao temeljni problem se pojavljuje to što niti jedan od njih nije mogao sadržavati sve znakove.
Ovaj problem rješava Unicode odnosno ISO-10646 standard koji koristi jedinstven broj za svaki znak, bez obzira na platformu, na program ili jezik. Unutar Unicoda razvijalo se više vrsta kodiranja, primjerice UCS-2, UTF-32, UTF-16, UTF-8.
Vrlo rasprostranjeno kodiranje je UTF-8 kod kojeg se kodovi znakova manji od 128 (ASCII dio znakova) predstavljaju koristeći jedan bajt za svaki kod(znak). Svi drugi kodovi su prikazani pomoću posebne metode tako da je jedan znak predstavljen kao niz od dva do četiri bajta.

Fontovi
Oblik (Typeface) je skup svih slovnih i ostalih znakova koji svojim oblikom odgovaraju jedan drugom odnosno skup grafičkih znakova koji imaju isti prepoznatljiv oblik i dizajn.
Font predstavlja skup svih znakova iste veličine i stila koji pripadaju određenom obliku.
Isti font može imati različite stilove od kojih su najpoznatiji podebljani stil (bold) i kurziv (italic).
Veličina fonta je udaljenost od vrha velikih slova, pa do silaznog poteza.

Slika 12. Times New Roman veličine 12 točaka

TrueType fontovi su oni fontovi koje je moguće prikazivati u bilo kojoj veličini bez gubitka na kvaliteti jer za znakove koriste vektorsku grafiku.
Primjeri takvog fonta su Times New Roman,Arial, Verdana itd.

Serifni i neserifni fontovi

Serifi su mali ukrasi dodani na krajevima glavnih linija slova. Primjeri serifnih fontova su: Times New Roman, Bookman Old Style itd.
Neserifni fontovi (San Serif) su fontovi koji nemaju završetke ili "serife" na svojim slovima. Primjeri takvog fonta su Arial, Verdana, Tahoma,Comic Sans MS itd.

Struktura hipermedije i navigacija

Međusobno povezivanje hipermedijskih stranica (čvorova) hipervezama ili struktura hipermreže neke hipermedijske prezentacije može biti organizirano na više načina.

Linearna struktura
Pri ovakvoj organizaciji navigacija se tipično sastoji samo od koraka naprijed i natrag.

Princip središnje strane
Glavna stranica je središnja. Ukoliko se želi doći do sadržaja neke druge strane u prezentaciji, mora se ići preko glavne (središnje) stranice.

Mreža ili kompozitna organizacija
Kod ovakve organizacije sve stranice su međusobno potpuno slobodno povezane te se zbog velikog broja veza korisnici mogu lako izgubiti.

Hijerarhijska organizacija
Hijerarhijska se organizacija najviše koristi. Kod ovakve organizacije potrebno je dodati navigacijsku traku i linkove koji pomažu korisnicima da se snađu unutar prezentacije.

Navigacija

Najčešće korišteni elementi za navigaciju su tekstualni izbornici i popis sadržaja, padajući ili proširljivi popisi, trake (toolbar) ili paneli s vodoravnim ili okomitim hipervezama ili gumbima za navigaciju. Traka sadrži vodoravne gumbe ili hiperveze dok panel sadrži okomite gumbe ili hiperveze.

Slika 13. Tabovi za navigaciju i tražilica

Često se koriste i tabovi te «breadcrumb» navigacija: tekstualni linkovi prate kretanje kroz niže nivo hijerarhije.

Slika 14. Breadcrumb navigacija